<template>
    <div style="height:100%;">
        <top></top>
        <div v-if="isPayment">
            <div>
                <message></message>
                <div>
                    <div v-if="isDetail" class="keshi">
                        <table>
                            <thead>
                                <tr>
                                    <th>科室名称</th>
                                    <th>就诊日期</th>
                                    <th>缴费费用</th>
                                    <th>缴费详情</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody v-if="appVisitPay!=null">
                                <tr>
                                    <td>{{appVisitPay.deptName}}</td>
                                    <td>{{appVisitPay.visitdate}}</td>
                                    <td>{{appVisitPay.paycosts}}</td>
                                    <td @click="goDetail">查看详情</td>
                                    <td @click="goRecharge">去支付</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div v-else class="keshi">
                        <table>
                            <thead>
                                <tr>
                                    <th>项目类别</th>
                                    <th>项目名称</th>
                                    <th>项目单价</th>
                                    <th>项目数量</th>
                                    <th>项目合计</th>
                                </tr>
                            </thead>
                            <tbody v-for="(v,i) in appVisitPay.detail">
                                <tr>
                                    <td>{{v.itemclass}}</td>
                                    <td>{{v.itemname}}</td>
                                    <td>{{v.price}}</td>
                                    <td>{{v.amount}}</td>
                                    <td>{{v.fee}}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="paymentFooter">
                    <div class="footLeftBtn" @click="goIndex">
                        首页
                    </div>
                    <div v-if="isDetail" class="footRightArea">
                        <div class="footRightAreaClose" @click="goInitial">关闭</div>
                    </div>
                    <div v-else  class="footRightArea">
                        <div class="">总金额：<span>￥{{appVisitPay.paycosts}}</span></div>
                        <div class="footRightAreaPay" @click="goRecharge">支付</div>
                        <div class="footRightAreaClose" @click="goBack">返回</div>
                    </div>
                </div>
            </div>
            <div v-show="isgoRecharge" class="diolog">
                <div v-if="isSure" class="diologBox">
                    <div class="diologBoxTop"><i @click="closeDiolog" class="iconfont icon-cha"></i></div>
                    <div style="clear:both;"></div>
                    <div class="diologBoxContent">
                        <div class="contentTitle">请再次确认个人信息</div>
                        <div class="contentName">{{account.realName}}</div>
                        <div class="contentCard">身份证信息：{{account.idCard}}</div>
                    </div>
                    <div class="diologBoxBtn">
                        <div class="diologBoxBtnItem">信息有误</div>
                        <div class="diologBoxBtnItem" @click="sureRecharge(appVisitPay)">确认充值</div>
                    </div>
                </div>
                <div v-else class="diologBox typeDiologBox">
                    <div class="diologBoxTopType">
                        <div>请选择充值方式</div>
                        <div><i @click="closeDiolog" class="iconfont icon-cha"></i></div>
                    </div>
                    <div class="diologBoxImg">
                        <div class="diologBoxImgItem" @click="goPay('AL')">
                            <img :src="zfbLogo" alt="">
                            <div class="diologBoxImgItemTitle">
                                支付宝
                            </div>
                        </div>
                        <div class="diologBoxImgItem" @click="goPay('WX')">
                            <img :src="wxLogo" alt="">
                            <div class="diologBoxImgItemTitle">
                                微信
                            </div>
                        </div>
                    </div>
                </div>
            </div> 
        </div>
        <div v-else class="payCord">
            <div class="payCordBtn" @click="closePay">
                关 闭（120s）
            </div>
            <div class="payCordItem">
                <div><vue-qr :logoSrc="wxLogo"  :text="codeValue" :logoScale="50" colorDark="#f67b29" colorLight="#fff" :size="300" :margin="0"></vue-qr></div>
                <div class="payCordItemLeftMoney">需支付  ￥{{this.payAmount}}</div>
                <div class="payCordItemLeftBalance">{{account.realName}}就诊卡余额 ￥{{account.blanefee}}</div>
            </div>
            <div class="payCordItem">
                <div class="payCordItemRight">
                    <img src="../../assets/img/zfbDemo.png" alt="">
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import top from "../../components/top";
import zfbLogo from "../../assets/img/zfb.png";
import wxLogo from "../../assets/img/wx.png";
import message from "../../components/message";
import { getStore } from '@/util/store';
import { validatenull } from '@/util/validate';
import { getVisitPays,getDept,saveOrder,payOrder } from '@/api/app';
import VueQr from 'vue-qr';
export default {
    name:'recharge',
    components: {
        top,
        message,
        VueQr
    },  
    data(){
        return {
            priceType:[
                {
                    data:100
                },
                {
                    data:200
                },
                {
                    data:300
                },
                {
                    data:500
                },
                {
                    data:1000
                },
                {
                    data:2000
                },
            ],         
                                  
            isDetail: true,//项目详情
            isSure: true,//确定
            isgoRecharge: false,//点击去支付
            isPayment: true,//选择了支付方式
            zfbLogo: zfbLogo,
            wxLogo: wxLogo,
            account: {},//主账号信息
            dept: {}, //科室信息
            appVisitPay: null, //缴费信息
            tradeno: '',//缴费记录订单号
            payAmount: '',//支付金额
            codeValue: '', //二维码文本信息        

        }
    },
    mounted() {
        this.account=getStore({name:'account'});
        this.getData();
    },
    methods:{
        // 充值
        goRecharge() {
            this.isgoRecharge = true;
        },
        // 去支付
        goPay(payType){
             //AL : 支付宝  WX：微信
            payOrder({tradeno:this.tradeno,payType:payType}).then(res=>{
                if(res.data.code==0){                    
                    this.codeValue = res.data.data.code_url;   
                    this.payAmount =res.data.data.payAmount; 
                    this.isPayment = false; 
                }else{
                    this.$message.warning(res.data.msg); 
                }
                
            });
            
        },
        // 关闭弹出框
        closeDiolog() {
            this.isgoRecharge = false;
            this.isSure = true;
        },
        // 查看详情
        goDetail() {
            this.isDetail = false
        },
        // 返回
        goBack() {
            this.isDetail=true;
            this.isSure=true;
            this.isgoRecharge=false;
        },
        // 返回初始页
        goIndex() {
            this.$router.push({
                path:`/`
            })
        },
        // 去首页
        goInitial() {
            this.$router.push({
                path:`/initial`
            })
        },
        // 关闭支付页面
        closePay(){
            this.isPayment = true;
            this.isgoRecharge=false;
            this.isDetail=true;
        },
        //获取缴费信息
        getData(){
            //先获取科室信息，再获取缴费信息
            getDept({hostcode:"888888"}).then(res => {
                const dept={};
                if(!validatenull(res.data.data)){
                    res.data.data.forEach(function(e){  
                        dept[e.code]=e;  
                    });
                    this.dept=dept;
                }
                const param={
                    hostcode: this.account.hostCode,
                    patientname: this.account.realName,
                    idcard: this.account.idCard,
                    phone:this.account.phoneNo,
                    cardno: this.account.cardno,
                    cardtype: this.account.cardtype,
                }
                getVisitPays(param).then(res => {
                    if(!validatenull(res.data.data)){
                        this.appVisitPay=res.data.data;
                        this.appVisitPay.deptName=this.dept[this.appVisitPay.orderedby].name;
                        const detail=[];
                        detail.push(res.data.data);
                        this.appVisitPay.detail=detail;
                    }
                    
                });
            });           
        },
        //确认支付
        sureRecharge(row){
            const order={
                recipeno: row.prescno,
                hisregno: row.serialno,
                treatmentno: row.visitno,
                groupid: row.groupid,
                deptcode1: row.performedby,
                deptcode2: row.orderedby,
                recipettype: row.recipettype,
                fee: row.paycosts,
                tradeno: row.tradeno,
                cardtype: row.cardtype,
                cardno: row.cardno,
                
                itemList:[
                    {
                        itemno: row.itemno,
                        itemtype: row.itemclass,
                        itemname: row.itemname,
                        feelevel: row.feelevel,
                        unitprice: row.price,
                        count: row.amount,
                        fee: row.fee,
                        specificatio: row.itemspec,
                        unit: row.units,
                        usages: row.usages,
                        dose: row.dose,
                        doseage: row.doseage,
                        packages: row.units,
                        days: row.days
                    }
                ],
          
            };
            saveOrder(order).then(res =>{
                if(res.data.code==0){
                    this.tradeno = res.data.data.tradeno;
                    this.isSure = false;    
                }else{
                    this.$message.warning(res.data.msg); 
                }
                
            });
        }
    }
}
</script>
<style>
.rechargeType {
    margin-top: 30px;
    width: 100%;
    display: flex;
    flex-wrap:wrap;
}
.rechargeTypeItem {
    width: 25%;
    font-size: 45px;
    color: #36c3ca;
    border: 1px solid #36c3ca;
    border-radius: 5px;
    box-sizing: border-box;
    text-align: center;
    padding: 20px 0;
}
.rechargeTypeItem:nth-child(2),.rechargeTypeItem:nth-child(5){
    margin: 0 12.5%;
}
.rechargeTypeItem:nth-child(1),
.rechargeTypeItem:nth-child(2),
.rechargeTypeItem:nth-child(3){
    margin-bottom: 20px;
}
.paymentFooter {
    width: 100%;
    display: flex;
    position: fixed;
    justify-content: space-between;
    bottom: 0;
    font-size: 16px;
}
.footLeftBtn {
    color: #ffffff;
    width: 130px;
    height: 90px;
    background-color: #36c3ca;
    display: flex;
    align-items: center;
    justify-content: center;
}
.footRightArea {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 2.5%;
}
.footRightAreaPay {
    color: #ffffff;
    width: 110px;
    height: 40px;
    background-color: #ffa600;
    display: flex;
    border-radius: 5px;
    align-items: center;
    justify-content: center;
    margin-left: 40px;
    margin-right: 30px;
}
.footRightAreaClose {
    color: #ffffff;
    width: 110px;
    height: 40px;
    background-color: #cecece;
    display: flex;
    border-radius: 5px;
    align-items: center;
    justify-content: center;
}
.keshi {
    height: 400px;
    width: 95%;
    margin: 0 2.5%;
    border-left: 1px solid #cccccc;
    border-right: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
}
.keshi table {
    width: 100%;
    border-spacing: 0px;
    color: #545454;
}
.keshi table>thead {
    background: #e1f6f7;
}
.keshi table>thead>tr>th {
    width: 20%;
    padding: 12px 0;
}
.keshi table>tbody>tr>td {
    width: 20%;
    padding: 12px 0;
    border-bottom: 1px solid #cccccc;
    text-align: center;
}
.keshi table>tbody>tr>td:nth-child(4) {
    color: #36c3ca;
}
.keshi table>tbody>tr>td:nth-child(5) {
    color: #ffa600;
}
.diolog {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}
.diologBox {
    background-color: #ffffff;
    border-radius: 5px;
    margin-top: -70px;
}
.typeDiologBox {
    margin-top: -150px;
}
.diologBoxTop {
    float: right;
    padding: 10px;
    
}
.diologBoxTopType {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #cccccc;
    padding: 10px;
    font-size: 20px;
}
.diologBoxImgItemTitle {
    text-align: center;
    margin-top: 10px;
}
.diologBoxImg {
    display: flex;
    padding: 70px 90px 60px 90px;
}
.diologBoxImgItem:nth-child(1) {
    margin-right: 40px;
}
.diologBoxImgItem:nth-child(2) {
    margin-left: 40px;
}
.diologBoxImgItem img {
    width: 120px;
    height: 120px;
    border-radius: 15px;
}
.icon-cha {
    font-size: 24px !important;
    color: #e6e6e6;
}
.diologBoxContent {
    text-align: center;
}
.diologBoxBtn {
    display: flex;
    border-top: 1px solid #eeeeee;
    box-sizing: border-box;
}
.diologBoxBtnItem {
    width: 50%;
    text-align: center;
    padding: 15px 50px;
}
.diologBoxBtnItem:nth-child(2) {
    background-color: #ffa600;
    color: #ffffff;
    border-bottom-right-radius: 5px;
}
.contentTitle {
    margin-bottom: 5px;
    font-size: 18px;
    line-height: 36px;
}
.contentName {
    font-size: 26px;
    line-height: 52px;
    margin-bottom: 5px;
}
.contentCard {
    font-size: 16px;
    line-height: 32px;
    color: #cccccc;
    margin-bottom: 20px;
}
/* 扫码支付页面 */
.payCord {
    width:100%;
    height: 100%;
    display: flex;
}
.payCordItem {
    width: 50%;
    box-sizing: border-box;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.payCordItemLeftMoney {
    margin: 40px 0 20px 0;
}
.payCordItemLeftBalance {
    color: #cccccc;
}
.payCordItemRight img {
    height: 500px;
}
.payCordBtn {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    right: 30px;
    margin-top: 30px;
    background-color: #ed2525;
    height: 40px;
    width: 120px;
    border-radius: 5px;
    color: #ffffff;
}
</style>

